<template>
  <el-dialog
    title="设置自动填充行" 
    v-dialogDrag 
    :visible.sync="dialogVisible"
    width="900px" 
    :before-close="handleCancelAutoRowClick"
    class="auto-fill-dialog"
  >
    <div class="dialog-content">
      <el-form label-width="100px" size="medium" :model="autoForm" class="auto-form">
        <el-form-item label="填充方式">
          <el-radio-group v-model="autoForm.dateMode">
            <el-radio :label="1" border>按年</el-radio>
            <el-radio :label="2" border>按月</el-radio>
            <el-radio :label="3" border>按日</el-radio>
          </el-radio-group>
        </el-form-item>
        
        <div class="rule-container">
          <div v-for="(item, index) in autoForm.list" :key="index" class="rule-item">
            <div class="rule-header">
              <span class="rule-title">规则 {{ index + 1 }}</span>
              <div class="rule-actions">
                <el-button 
                  type="primary" 
                  icon="el-icon-plus" 
                  size="mini" 
                  circle
                  @click="handleAddAutoRow"
                ></el-button>
                <el-button 
                  type="danger" 
                  icon="el-icon-delete" 
                  size="mini" 
                  circle
                  v-if="autoForm.list.length > 1" 
                  @click="handleDelAutoRow(index)"
                ></el-button>
              </div>
            </div>
            
            <el-form-item label="指定值" class="specified-values">
              <div class="checkbox-group">
                <el-checkbox 
                  label="月" 
                  :true-label="1"
                  :false-label="0"
                  v-model="item.isAppointM"
                  :disabled="autoForm.dateMode === 2 || autoForm.dateMode === 3"
                  class="custom-checkbox"
                >
                  月
                </el-checkbox>
                <el-select 
                  v-model="item.valueM" 
                  placeholder="选择月份" 
                  style="width:120px"  
                  :disabled="autoForm.dateMode === 2 || autoForm.dateMode === 3 || !item.isAppointM"
                  class="value-select"
                >
                  <el-option 
                    v-for="month in 12" 
                    :key="month" 
                    :label="`${month}月`" 
                    :value="month"
                  ></el-option>
                </el-select>
              </div>

              <div class="checkbox-group">
                <el-checkbox 
                  label="日" 
                  :disabled="autoForm.dateMode === 3" 
                  v-model="item.isAppointD" 
                  :true-label="1" 
                  :false-label="0"
                  class="custom-checkbox"
                >
                  日
                </el-checkbox>
                <el-select 
                  v-model="item.valueD" 
                  placeholder="选择日期" 
                  style="width:120px" 
                  :disabled="autoForm.dateMode === 3 || !item.isAppointD"
                  class="value-select"
                >
                  <el-option 
                    v-for="day in 31" 
                    :key="day" 
                    :label="`${day}日`" 
                    :value="day"
                  ></el-option>
                </el-select>
              </div>
              
              <div class="checkbox-group">
                <el-checkbox 
                  label="小时"  
                  v-model="item.isAppointH" 
                  :true-label="1" 
                  :false-label="0"
                  class="custom-checkbox"
                >
                  小时
                </el-checkbox>
                <el-select 
                  v-model="item.valueH" 
                  placeholder="选择小时" 
                  style="width:120px"
                  :disabled="!item.isAppointH"
                  class="value-select"
                >
                  <el-option 
                    v-for="hour in 24" 
                    :key="hour" 
                    :label="`${hour}时`" 
                    :value="hour % 24"
                  ></el-option>
                </el-select>
              </div>
            </el-form-item>
            
            <el-form-item label="时段" class="time-range"> 
              <div class="range-group">
                <div class="range-item">
                  <span class="range-label">开始时段：</span>
                  <el-select 
                    v-model="item.startM" 
                    placeholder="月份" 
                    style="width:120px"  
                    :disabled="autoForm.dateMode === 2 || autoForm.dateMode === 3"
                    class="range-select"
                  >
                    <el-option 
                      v-for="month in 12" 
                      :key="month" 
                      :label="`${month}月`" 
                      :value="month"
                    ></el-option>
                  </el-select>
                  <el-select 
                    v-model="item.startD" 
                    placeholder="日期" 
                    style="width:120px" 
                    :disabled="autoForm.dateMode === 3"
                    class="range-select"
                  >
                    <el-option 
                      v-for="day in 31" 
                      :key="day" 
                      :label="`${day}日`" 
                      :value="day"
                    ></el-option>
                  </el-select>
                </div>
                
                <div class="range-item">
                  <span class="range-label">结束时段：</span>
                  <el-select 
                    v-model="item.endM" 
                    placeholder="月份" 
                    style="width:120px"  
                    :disabled="autoForm.dateMode === 2 || autoForm.dateMode === 3"
                    class="range-select"
                  >
                    <el-option 
                      v-for="month in 12" 
                      :key="month" 
                      :label="`${month}月`" 
                      :value="month"
                    ></el-option>
                  </el-select>
                  <el-select 
                    v-model="item.endD" 
                    placeholder="日期" 
                    style="width:120px" 
                    :disabled="autoForm.dateMode === 3"
                    class="range-select"
                  >
                    <el-option 
                      v-for="day in 31" 
                      :key="day" 
                      :label="`${day}日`" 
                      :value="day"
                    ></el-option>
                  </el-select>
                </div>
              </div>
            </el-form-item>
          </div>
        </div>
      </el-form>  
    </div>
    
    <div class="dialog-footer">
      <el-button @click="handleCancelAutoRowClick" class="cancel-btn" round icon="el-icon-close" size="small">取消</el-button>
      <el-button type="primary" @click="handleConfirmAutoRow" class="confirm-btn" round icon="el-icon-check" size="small">确认配置</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'AutoFillDialog',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    autoForm: {
      type: Object,
      default: () => ({
        dateMode: 1,
        list: [
          {
            isAppointM: 0,
            valueM: 1,
            isAppointD: 0,
            valueD: 1,
            isAppointH: 0,
            valueH: 0,
            startM: 1,
            startD: 1,
            endM: 12,
            endD: 31
          }
        ]
      })
    }
  },
  data(){
    return{
      dialogVisible: this.visible,
    }
  },
  watch: {
    visible(newVal) {
        this.dialogVisible = newVal
    },
    dialogVisible(newVal) {
        this.$emit('update:visible', newVal)
    },
  },
  methods: {
    handleAddAutoRow() {
      this.autoForm.list.push({})
    },
    handleDelAutoRow(index) {
      this.autoForm.list.splice(index,1)
    },
    handleCancelAutoRowClick() {
      this.$emit('cancel');
    },
    handleConfirmAutoRow() {
      this.$emit('confirm',this.autoForm);
    }
  }
}
</script>

<style scoped >

.dialog-content {
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 5px;
}

.dialog-content::-webkit-scrollbar {
  width: 6px;
}

.dialog-content::-webkit-scrollbar-thumb {
  background-color: #c0c4cc;
  border-radius: 3px;
}

.auto-form ::v-deep .el-form-item {
  margin-bottom: 20px;
}

.auto-form ::v-deep .el-form-item__label {
  font-weight: 600;
  color: #606266;
}

.rule-container {
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  padding: 15px;
  background-color: #f9f9f9;
}

.rule-item {
  background: white;
  border-radius: 4px;
  padding: 15px;
  margin-bottom: 15px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  position: relative;
}

.rule-item:last-child {
  margin-bottom: 0;
}

.rule-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #e6e6e6;
}

.rule-title {
  font-weight: 600;
  color: #409EFF;
  font-size: 14px;
}

.rule-actions .el-button {
  margin-left: 8px;
}

.specified-values ::v-deep .el-form-item__content {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.checkbox-group {
  display: flex;
  align-items: center;
  background: #f5f7fa;
  padding: 8px 12px;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
}

.custom-checkbox {
  margin-right: 8px;
}

.value-select {
  margin-left: 8px;
}

.time-range ::v-deep .el-form-item__content {
  line-height: normal;
}

.range-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.range-item {
  display: flex;
  align-items: center;
}

.range-label {
  width: 80px;
  color: #606266;
  font-size: 14px;
}

.range-select {
  margin-left: 10px;
}

.range-select:first-of-type {
  margin-left: 0;
}
</style>